<template>
  <div class="personal-center">
    <h1>个人中心</h1>
    <div class="per-container">
      <div class="per-l">
        <div
          class="per-l-item"
          @click="gotoUserInfo()"
          :class="{ active: isGotoUserInfo }"
        >
          个人信息管理
        </div>
        <div
          class="per-l-item"
          @click="gotoLikePost()"
          :class="{ active: isGotoLikePost }"
        >
          点赞过的帖子
        </div>
        <div
          class="per-l-item"
          @click="gotoPersonalPost()"
          :class="{ active: isGotoPersonalPost }"
        >
          发布过的帖子
        </div>
        <div
          class="per-l-item"
          @click="gotoDiZhi()"
          :class="{ active: isGotoDiZhi }"
        >
          地址信息管理
        </div>
      </div>
      <div class="per-r">
        <div v-if="isGotoUserInfo" class="info-content">
          <h2>个人信息</h2>
          <div class="form-group">
            <label for="nickname">昵称</label>
            <input
              type="text"
              v-model="list.nickname"
              id="nickname"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="username">账号</label>
            <input
              type="text"
              v-model="list.username"
              id="username"
              disabled
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="phone">电话</label>
            <input
              type="text"
              v-model="list.phone"
              id="phone"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="gender">性别</label>
            <div class="gender-radio-group">
              <input
                type="radio"
                id="baomi"
                name="gender"
                value="0"
                v-model="list.gender"
                class="form-radio"
              />
              <label for="baomi" class="form-radio-label">保密</label>
              <input
                type="radio"
                id="nan"
                name="gender"
                value="1"
                v-model="list.gender"
                class="form-radio"
              />
              <label for="nan" class="form-radio-label">男</label>
              <input
                type="radio"
                id="nv"
                name="gender"
                value="2"
                v-model="list.gender"
                class="form-radio"
              />
              <label for="nv" class="form-radio-label">女</label>
            </div>
          </div>
          <div class="form-group">
            <label for="personalizedSignature">个性签名</label>
            <input
              type="text"
              v-model="list.personalizedSignature"
              id="personalizedSignature"
              class="form-input"
            />
          </div>
          <button @click="saveInfo()" class="btn">保存</button>
        </div>
        <div v-if="isGotoLikePost">
          <div
            class="item-post"
            v-for="(item, index) in postList"
            :key="index"
            @click="gotoTheDetail(item.id)"
          >
            <div class="item-l" v-if="item.pic">
              <img :src="item.pic" alt="商品图片" class="item-img" />
            </div>
            <div class="item-l" v-else>
              <img
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.81XR5IZQy_j31NZvaXSJIAAAAA?w=141&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt=""
                class="item-img"
              />
            </div>
            <div class="item-r">
              <p class="title">{{ item.title }}</p>
              <p class="comments">发布者：{{ item.nickName }}</p>
              <p class="time">发布时间：{{ item.postTime.slice(0, 10) }}</p>
              <p class="views">浏览量：{{ item.viewCount }}</p>
              <p class="likes">点赞量：{{ item.likeCount }}</p>
              <p class="comments">评论数：{{ item.commentCount }}</p>
            </div>
          </div>
        </div>
        <div v-if="isGotoPersonalPost">
          <div
            class="item-post"
            v-for="(item, index) in myPostList"
            :key="index"
            @click="gotoTheDetail(item.id)"
          >
            <div class="item-l" v-if="item.pic">
              <img :src="item.pic" alt="商品图片" class="item-img" />
            </div>
            <div class="item-l" v-else>
              <img
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.81XR5IZQy_j31NZvaXSJIAAAAA?w=141&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt=""
                class="item-img"
              />
            </div>
            <div class="item-r">
              <p class="title">{{ item.title }}</p>
              <p class="comments">发布者：{{ item.nickName }}</p>
              <p class="time">发布时间：{{ item.postTime.slice(0, 10) }}</p>
              <p class="views">浏览量：{{ item.viewCount }}</p>
              <p class="likes">点赞量：{{ item.likeCount }}</p>
              <p class="comments">评论数：{{ item.commentCount }}</p>
            </div>
          </div>
        </div>

        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="position: absolute; width: 0px; height: 0px; overflow: hidden"
        >
          <defs>
            <symbol id="icon-add" viewBox="0 0 31 32">
              <title>add</title>
              <path
                d="M30.745 15.152h-14.382v-14.596c0-0.308-0.243-0.557-0.543-0.557s-0.543 0.249-0.543 0.557v14.596h-14.665c-0.3 0-0.543 0.249-0.543 0.557s0.243 0.557 0.543 0.557h14.665v15.177c0 0.307 0.243 0.557 0.543 0.557s0.543-0.249 0.543-0.557v-15.177h14.382c0.3 0 0.543-0.249 0.543-0.557s-0.243-0.557-0.543-0.557z"
                class="path1"
              ></path>
            </symbol>
            <symbol id="icon-edit" viewBox="0 0 32 32">
              <title>edit</title>
              <path
                d="M28.287 8.51l-4.805-4.806 0.831-0.831c0.472-0.472 1.086-0.777 1.564-0.777 0.248 0 0.452 0.082 0.622 0.253l3.143 3.144c0.539 0.54 0.133 1.529-0.524 2.186l-0.831 0.831zM26.805 9.992l-1.138 1.138-4.805-4.806 1.138-1.138 4.805 4.806zM24.186 12.612l-14.758 14.762-4.805-4.806 14.758-14.762 4.805 4.806zM7.379 28.288l-4.892 1.224 1.223-4.894 3.669 3.67zM31.123 4.011l-3.143-3.144c-0.567-0.567-1.294-0.867-2.103-0.867-1.036 0-2.174 0.52-3.045 1.391l-20.429 20.436c-0.135 0.134-0.23 0.302-0.276 0.487l-2.095 8.385c-0.089 0.355 0.017 0.736 0.276 0.995 0.198 0.198 0.461 0.307 0.741 0.307 0.085 0 0.171-0.010 0.254-0.031l8.381-2.096c0.185-0.047 0.354-0.142 0.487-0.276l20.43-20.436c1.409-1.41 2.042-3.632 0.524-5.15v0z"
                class="path1"
              ></path>
            </symbol>
            <symbol id="icon-del" viewBox="0 0 32 32">
              <title>delete</title>
              <path
                d="M11.355 4.129v-2.065h9.29v2.065h-9.29zM6.194 29.935v-23.742h19.613v23.742h-19.613zM30.968 4.129h-8.258v-3.097c0-0.569-0.463-1.032-1.032-1.032h-11.355c-0.569 0-1.032 0.463-1.032 1.032v3.097h-8.258c-0.569 0-1.032 0.463-1.032 1.032s0.463 1.032 1.032 1.032h3.097v24.774c0 0.569 0.463 1.032 1.032 1.032h21.677c0.569 0 1.032-0.463 1.032-1.032v-24.774h3.097c0.569 0 1.032-0.463 1.032-1.032s-0.463-1.032-1.032-1.032v0z"
                class="path1"
              ></path>
              <path
                d="M10.323 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z"
                class="path2"
              ></path>
              <path
                d="M16 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z"
                class="path3"
              ></path>
              <path
                d="M21.677 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z"
                class="path4"
              ></path>
            </symbol>
          </defs>
        </svg>

        <div v-if="isGotoDiZhi">
          <div class="item-address">
            <h2 class="addr-title">收货地址</h2>
            <div class="addr-list clearfix">
              <div
                class="addr-info"
                :class="{ checked: index == checkIndex }"
                @click="checkIndex = index"
                v-for="(item, index) in addresslist"
                :key="index"
              >
                <h2>{{ item.name }}</h2>
                <div class="phone">{{ item.phoneNumber }}</div>
                <div class="street">
                  {{
                    item.province +
                      " " +
                      item.city +
                      " " +
                      item.region +
                      " " +
                      item.detailAddress
                  }}
                </div>
                <div class="action">
                  <a href="javascript:;" class="fl" @click="delAddress(item)">
                    <svg class="icon icon-del">
                      <use xlink:href="#icon-del"></use>
                    </svg>
                  </a>
                  <a
                    href="javascript:;"
                    class="fr"
                    @click="editAddressModal(item)"
                  >
                    <svg class="icon icon-edit">
                      <use xlink:href="#icon-edit"></use>
                    </svg>
                  </a>
                </div>
              </div>
              <div class="addr-add" @click="openAddressModal">
                <div class="icon-add"></div>
                <div>添加新地址</div>
              </div>
            </div>
          </div>
          <modal
            title="新增确认"
            btnType="1"
            :showModal="showEditModal"
            @cancel="showEditModal = false"
            @submit="submitAddress"
          >
            <template v-slot:body>
              <div class="edit-wrap">
                <div class="item">
                  <input
                    type="text"
                    class="input"
                    placeholder="姓名"
                    v-model="checkedItem.name"
                  />
                  <input
                    type="text"
                    class="input"
                    placeholder="手机号"
                    v-model="checkedItem.phoneNumber"
                  />
                </div>
                <div class="item">
                  <select name="province" v-model="checkedItem.province">
                    <option
                      :value="item"
                      v-for="(item, i) in Object.keys(pcaList)"
                      :key="i"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <select
                    name="city"
                    v-model="checkedItem.city"
                    v-if="checkedItem.province"
                  >
                    <option
                      :value="item"
                      v-for="(item, i) in Object.keys(
                        pcaList[checkedItem.province]
                      )"
                      :key="i"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <select
                    name="region"
                    v-model="checkedItem.region"
                    v-if="checkedItem.city"
                  >
                    <option
                      :value="item"
                      v-for="(item, i) in pcaList[checkedItem.province][
                        checkedItem.city
                      ]"
                      :key="i"
                    >
                      {{ item }}
                    </option>
                  </select>
                </div>
                <div class="item">
                  <!-- 1. 引入组件支持 -->
                  <el-autocomplete
                    class="inline-input"
                    v-model="checkedItem.detailAddress"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入详细地址"
                    :trigger-on-focus="false"
                    @select="handleSelect"
                  ></el-autocomplete>
                </div>
                <div class="item">
                  <input
                    type="text"
                    class="input"
                    placeholder="邮编"
                    v-model="checkedItem.postCode"
                  />
                </div>
              </div>
            </template>
          </modal>
          <modal
            title="删除确认"
            btnType="1"
            :showModal="showDelModal"
            @cancel="showDelModal = false"
            @submit="submitAddress"
          >
            <template v-slot:body>
              <p>您确认要删除此地址吗？</p>
            </template>
          </modal>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Modal from "./../components/Modal";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      list: {
        nickname: "",
        phone: "",
        gender: "",
        personalizedSignature: "",
      },
      postList: [],
      myPostList: [],
      isGotoUserInfo: true,
      isGotoLikePost: false,
      isGotoPersonalPost: false,
      isGotoDiZhi: false,

      addresslist: [], //收货地址列表
      checkedItem: {
        province: "",
        city: "",
        region: "",
      }, //选中的商品对象
      userAction: "", //用户行为 0：新增 1：编辑 2：删除
      showDelModal: false, //是否显示删除弹框
      showEditModal: false, //是否显示新增或者编辑弹框
      checkIndex: 0, //当前收货地址选中索引
      couponList: [],
      itemIds: [],
      activeIndex: 0,
      totalAmount: 0,
      freightAmount: 0,
      //promotionAmount: 50,
      payAmount: 0,
      curCouponId: 0,
      couponAmount: 0,
      pcaList: {}, // 省市区
    };
  },
  methods: {
    getUserInfo() {
      this.axios.get("/userInfo/get").then((res) => {
        window.console.log(res);
        this.list = res;
      });
    },
    gotoUserInfo() {
      this.isGotoUserInfo = true;
      this.isGotoLikePost = false;
      this.isGotoPersonalPost = false;
      this.isGotoDiZhi = false;
    },
    gotoLikePost() {
      this.isGotoUserInfo = false;
      this.isGotoLikePost = true;
      this.isGotoPersonalPost = false;
      this.isGotoDiZhi = false;
      this.watchLikePost();
    },
    gotoPersonalPost() {
      this.isGotoUserInfo = false;
      this.isGotoLikePost = false;
      this.isGotoPersonalPost = true;
      this.isGotoDiZhi = false;
      this.watchPersonalPost();
    },
    gotoDiZhi() {
      this.isGotoUserInfo = false;
      this.isGotoLikePost = false;
      this.isGotoPersonalPost = false;
      this.isGotoDiZhi = true;
    },
    saveInfo() {
      window.console.log(this.list.nickname);
      this.axios
        .put("/userInfo/update", {
          id: this.list.id,
          username: this.list.username,
          nickname: this.list.nickname,
          gender: this.list.gender,
          phone: this.list.phone,
          personalizedSignature: this.list.personalizedSignature,
        })
        .then((res) => {
          window.console.log("修改成功");
          this.$message.success({
            message: "修改成功",
          });
          // 清除token(退出登录时才需要)
          // this.$store.dispatch("clearToken");
          // this.$cookie.delete("token");
        });
    },
    watchLikePost() {
      this.axios.get("/userInfo/getLikePost").then((res) => {
        window.console.log(res);
        this.postList = res;
      });
    },
    watchPersonalPost() {
      this.axios.get("/userInfo/getMyPost").then((res) => {
        window.console.log(res);
        this.myPostList = res;
      });
    },
    gotoTheDetail(id) {
      window.console.log(id);
      this.$router.push(`/chatDetail/${id}`);
    },
    getAddressList() {
      this.axios.get("/member/address/list").then((res) => {
        this.addresslist = res;
      });
    },
    // 打开新增地址弹框
    openAddressModal() {
      this.userAction = 0;
      this.checkedItem = {};
      this.showEditModal = true;
    },
    // 打开修改地址弹框
    editAddressModal(item) {
      this.userAction = 1;
      this.checkedItem = item;
      this.showEditModal = true;
    },
    delAddress(item) {
      this.checkedItem = item;
      this.userAction = 2;
      this.showDelModal = true;
    },
    // 地址删除、编辑、新增功能
    submitAddress() {
      let { checkedItem, userAction } = this;
      let method,
        url,
        params = {};
      if (userAction == 0) {
        (method = "post"), (url = "/member/address/add");
      } else if (userAction == 1) {
        (method = "post"), (url = `/member/address/update/${checkedItem.id}`);
      } else {
        (method = "post"), (url = `/member/address/delete/${checkedItem.id}`);
      }
      if (userAction == 0 || userAction == 1) {
        let {
          name,
          phoneNumber,
          province,
          city,
          region,
          detailAddress,
          postCode,
        } = checkedItem;
        region = checkedItem.region;
        let errMsg = "";
        if (!name) {
          errMsg = "请输入收货人名称";
        } else if (!phoneNumber || !/\d{11}/.test(phoneNumber)) {
          errMsg = "请输入正确格式的手机号";
        } else if (!province) {
          errMsg = "请选择省份";
        } else if (!city) {
          errMsg = "请选择对应的城市";
        } else if (!detailAddress || !region) {
          errMsg = "请输入收货地址";
        } else if (!/\d{6}/.test(postCode)) {
          errMsg = "请输入六位邮编";
        }

        if (errMsg) {
          this.$message.error(errMsg);
          return;
        }
        params = {
          name,
          phoneNumber,
          postCode,
          province,
          city,
          region,
          detailAddress,
        };
      }

      this.axios[method](url, params).then(() => {
        this.closeModal();
        this.getAddressList();
        this.$message.success("操作成功");
      });
    },
    closeModal() {
      this.checkedItem = {};
      this.userAction = "";
      this.showDelModal = false;
      this.showEditModal = false;
    },
    querySearch(queryString, cb) {
      // 获取区域
      let region =
        this.checkedItem.province +
        this.checkedItem.city +
        this.checkedItem.region;
      // 请求百度地图web服务api地址
      let url =
        "/place/v2/search?query=" +
        queryString +
        "&region=" +
        region +
        "&output=json&ak=dMHpdAGjcrPQJXb5BbMm2CsNFUihNjEk";

      this.axios
        .get(url, {
          baseURL: "baiduMapApi", // 设置代理前缀，在vue.config.js中进行转发配置
        })
        .then((res) => {
          // 获得返回的数据
          let list = res.results;
          // 组装成autoComplete组件所需要的数据结构
          let results = [];
          list.map((item) => {
            results.push({
              value: item.name,
              address: item.address,
              province: item.province,
              city: item.city,
              area: item.area,
            });
          });
          // 调用 callback 返回建议列表的数据
          cb(results);
        });
    },
    handleSelect(item) {
      this.checkedItem.province = item.province;
      this.checkedItem.city = item.city;
      this.checkedItem.region = item.area;
    },
  },
  components: {
    Modal,
  },
  mounted() {
    this.getUserInfo();
    this.getAddressList();

    let pca = require("../api/pca.json");
    window.console.log(pca);
    this.pcaList = pca;
    /*
        {
         '湖南省':{长沙市:[区,区]} ,
         '江西省':{长沙市:[区,区]} ,
         '湖北省':{长沙市:[区,区]}
         },
    
         pca["湖北省"]["长沙市"]
        */
  },
};
</script>

<style scoped lang="scss">
/* 定义全局样式变量 */
:root {
  --primary-color: #007bff;
  --secondary-color: #f8f9fa;
  --border-color: #e2e8f0;
  --text-color: #333;
  --heading-color: #2d3748;
}

.personal-center {
  font-family: "Open Sans", sans-serif;
  color: var(--text-color);
  padding: 20px;
}

h1 {
  width: 100%;
  margin: 20px 0;
  font-size: 36px;
  text-align: center;
  color: var(--heading-color);
}

.per-container {
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
  height: auto;
  display: flex;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.per-l {
  flex: 1;
  background-color: var(--secondary-color);
  border-right: 1px solid var(--border-color);
}

.per-l-item {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.per-l-item:hover {
  background-color: #e2e8f0;
}

.per-l-item.active {
  background-color: var(--primary-color);
  color: blue;
}

.per-r {
  flex: 3;
  background-color: white;
  padding: 30px;
}

.info-content h2 {
  font-size: 24px;
  color: var(--heading-color);
  margin-bottom: 20px;
}

.info-content p {
  font-size: 16px;
  margin-bottom: 10px;
}

.common-content {
  font-size: 18px;
  color: var(--heading-color);
}

.item-post {
  width: 100%;
  height: 400px;
  display: flex;
  background-color: #f9f9f9;
  margin-bottom: 30px;
  border: 5px solid #cdcdcd;
  border-radius: 15px;
  box-sizing: border-box;
}

.item-l {
  flex: 2;
  background-color: #e0e0e0;

  position: relative;

  overflow: hidden;
}

.item-img {
  border-radius: 8px;
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-r {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-r p {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
}

.item-r .title {
  font-size: 24px;
  font-weight: bold;
  color: #222;
}

.item-r .time {
  color: #666;
}

.item-r .views,
.item-r .likes,
.item-r .comments {
  color: #888;
}

.item-post:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.info-content {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  color: var(--text-color);
  font-weight: 600;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-input-disabled {
  background-color: #f8f9fa;
  color: #6c757d;
}

.gender-radio-group {
  display: flex;
  align-items: center;
}

.form-radio {
  margin-right: 5px;
}

.form-radio-label {
  margin-right: 15px;
  cursor: pointer;
  color: var(--text-color);
}

.btn {
  padding: 10px 20px;
  background-color: #469af3;
  color: black;
  border: 2px solid #cdcdcd;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #2da579;

  color: white;
}

.addr-title {
  font-size: 20px;
  color: #333333;
  font-weight: 200;
  margin-bottom: 21px;
}

.item-address {
  padding-top: 38px;

  .addr-list {
    .addr-info,
    .addr-add {
      box-sizing: border-box;
      float: left;
      width: 271px;
      height: 180px;
      border: 1px solid #e5e5e5;
      margin-right: 15px;
      padding: 15px 24px;
      font-size: 14px;
      color: #757575;
    }

    .addr-info {
      cursor: pointer;

      h2 {
        height: 27px;
        font-size: 18px;
        font-weight: 300;
        color: #333;
        margin-bottom: 10px;
      }

      .street {
        height: 50px;
      }

      .action {
        height: 50px;
        line-height: 50px;

        .icon {
          width: 20px;
          height: 20px;
          fill: #666666;
          vertical-align: middle;

          &:hover {
            fill: #ff6700;
          }
        }
      }

      &.checked {
        border: 1px solid #ff6700;
      }
    }

    .addr-add {
      text-align: center;
      color: #999999;
      cursor: pointer;

      .icon-add {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: url("/imgs/icon-add.png") #e0e0e0 no-repeat center;
        background-size: 14px;
        margin: 0 auto;
        margin-top: 45px;
        margin-bottom: 10px;
      }
    }
  }
}

.edit-wrap {
  font-size: 14px;

  .item {
    margin-bottom: 15px;

    .inline-input {
      width: 100%;
    }

    .input {
      display: inline-block;
      width: 283px;
      height: 40px;
      line-height: 40px;
      padding-left: 15px;
      border: 1px solid #e5e5e5;

      & + .input {
        margin-left: 14px;
      }
    }

    select {
      height: 40px;
      line-height: 40px;
      border: 1px solid #e5e5e5;
      margin-right: 15px;
    }

    textarea {
      height: 62px;
      width: 100%;
      padding: 13px 15px;
      box-sizing: border-box;
      border: 1px solid #e5e5e5;
    }
  }
}
</style>
